<script setup lang="ts" name="User">
import { QForm, QTable, type FormItemRows, type TableColums } from '@meetjs/element-plus-kit'
import { getDicts } from '@/api/system/dict/index'
import type { User } from '@/api/system/user/type'
import type { IGetDictsRes } from '@/api/system/dict/type'
import { formatDate } from '@/utils/day'
import { authUserSelectAll, unallocatedUserList } from '@/api/system/role'

const props = defineProps<{
	roleId: string
}>()
const emits = defineEmits<{
	refresh: []
}>()

const sysNormalDisable = ref<IGetDictsRes>([])

// form
const formValue = ref({
	userName: '',
	phoneNumber: ''
})
const dialogSelectList = ref<number[]>([])
const formOptions = ref<FormItemRows[]>([
	{
		type: 'input',
		label: '用户名称',
		prop: 'userName'
	},

	{
		type: 'input',
		label: '手机号码',
		prop: 'phoneNumber'
	}
])

// table
const loading = ref(false)
const page = ref({
	currentPage: 1,
	pageSize: 10,
	total: 0
})
const tableData = ref<User[]>([])
const columns = ref<TableColums[]>([
	{
		type: 'selection',
		align: 'center'
	},
	{
		label: '用户名称',
		prop: 'userName'
	},
	{
		label: '用户昵称',
		prop: 'nickName'
	},
	{
		label: '邮箱',
		prop: 'email'
	},
	{
		label: '手机',
		prop: 'phoneNumber'
	},
	{
		label: '状态',
		prop: 'status'
	},
	{
		label: '创建时间',
		prop: 'createTime',
		formatter: v => formatDate(v.createTime)
	}
])
const visible = ref(false)
const btnLoading = ref(false)

const getTableData = async () => {
	try {
		loading.value = true
		const params = {
			pageNum: page.value.currentPage,
			pageSize: page.value.pageSize,
			...formValue.value,
			roleId: props.roleId
		}
		const res = await unallocatedUserList(params)
		tableData.value = res.data.rows
		page.value.total = res.data.total
	} finally {
		loading.value = false
	}
}
const handleSelectionChange = (val: User[]) => {
	dialogSelectList.value = val.map(item => item.id)
}

const initData = async () => {
	await getDicts('sys_sys_normal_disable').then(data => {
		sysNormalDisable.value = data
	})
}
function dialogCancel() {
	visible.value = false
}
initData()

const init = () => {
	visible.value = true
	getTableData()
}

async function dialogSubmit() {
	try {
		btnLoading.value = true
		const roleId = props.roleId
		const userIds = dialogSelectList.value.join(',')
		await authUserSelectAll({
			roleId,
			userIds
		})
		ElMessage.success('操作成功')
		visible.value = false
		emits('refresh')
	} finally {
		btnLoading.value = false
	}
}
defineExpose({
	init
})
</script>

<template>
	<ElDialog
		v-model="visible"
		title="选择用户"
		:close-on-click-modal="false"
		width="900px"
		@cancel="dialogCancel"
	>
		<div class="table-page-box">
			<div class="filter-box">
				<QForm
					inline
					:model="formValue"
					:form-options="formOptions"
					:buttons="['search', 'reset']"
					@search="getTableData"
					@reset="getTableData"
				/>
			</div>
			<div class="table-box">
				<QTable
					:data="tableData"
					:columns="columns"
					:page="page"
					:loading="loading"
					height="calc(100% - 96px)"
					style="width: 100%"
					@pageChange="getTableData"
					@selectionChange="handleSelectionChange"
				>
					<template #status="{ row }">
						<DictTag
							:value="row.status"
							:options="sysNormalDisable"
						/>
					</template>
				</QTable>
			</div>
		</div>
		<template #footer>
			<el-button @click="dialogCancel">取消</el-button>
			<el-button
				type="primary"
				:disabled="!dialogSelectList.length"
				:loading="btnLoading"
				@click="dialogSubmit"
			>
				确定
			</el-button>
		</template>
	</ElDialog>
</template>
<style lang="scss" scoped>
.table-page-box {
	.filter-box {
		margin-bottom: 0;
	}
}
</style>
